import React, { useState } from 'react'
import { NavBar, Space, Toast, Button, List, Modal, } from 'antd-mobile'
import { useNavigate } from 'react-router-dom'
import {
  Form,
  Input,
  Dialog,
  TextArea,
  DatePicker,
  Selector,
  Slider,
  Stepper,
  Switch,
} from 'antd-mobile'

function Index() {
  // 跳转
  const navigate = useNavigate()
  // 数据
  const person = [
    {
      id: 1,
      name: '张小三',
      code: '132311200001012113',
    },
    {
      id: 2,
      name: '热巴',
      code: '145420588945510545',
    },
    {
      id: 3,
      name: '赵铁锤',
      code: '458895555246226555',
    },
  ]
  const [visible, setVisible] = useState(false)
  const handleAddPer = () => {
    setVisible(true)
  }
  return (
    <div>
      <NavBar onBack={() => navigate(-1)}>添加乘车人</NavBar>
      <List>
        <Button block size='small'
          color='primary'
          onClick={() => handleAddPer()}
        >
          添加乘车人
        </Button>
        {
          person.map((item, index) => {
            return <div>
              <List.Item key={index}>
                <p>{item.name}</p>
                <p>{item.code}</p>
              </List.Item>
            </div>
          })
        }
      </List>
      <Modal
        visible={visible}
        content={<div>
          <Form
            layout='horizontal'
            footer={
              <Button block type='submit' color='primary' size='large'>
                提交
              </Button>
            }
          >
            <Form.Header>添加乘车人</Form.Header>
            <Form.Item
              name='name'
              label='乘客类型'
              rules={[{ required: true, message: '乘客类型不能为空' }]}
            >
              <Input onChange={console.log} placeholder='请输入乘客类型' />
            </Form.Item>

            <Form.Item
              name='name'
              label='姓名'
              rules={[{ required: true, message: '姓名不能为空' }]}
            >
              <Input onChange={console.log} placeholder='请输入姓名' />
            </Form.Item>

            <Form.Item
              name='name'
              label='证件类型'
              rules={[{ required: true, message: '证件类型不能为空' }]}
            >
              <Input onChange={console.log} placeholder='请输入证件类型' />
            </Form.Item>

            <Form.Item
              name='name'
              label='证件号码'
              rules={[{ required: true, message: '证件号码不能为空' }]}
            >
              <Input onChange={console.log} placeholder='请输入证件号码' />
            </Form.Item>

            <Form.Item
              name='name'
              label='手机号码'
              rules={[{ required: true, message: '手机号码不能为空' }]}
            >
              <Input onChange={console.log} placeholder='请输入手机号码' />
            </Form.Item>

          </Form>
        </div>}
        closeOnAction
        onClose={() => {
          setVisible(false)
        }}
      // actions={[
      //   {
      //     key: 'confirm',
      //     text: '确认',
      //   },
      //   {
      //     key: 'cancel',
      //     text: '取消',
      //   },
      // ]}
      />
    </div>
  )
}

export default Index
